$(function() {
	//tabs切换<!-- 12Tab标签 -->
	/*Tab 选项卡 标签*/
	//tabs切换（.tab_menu ul li）
	//1、添加点击事件
	//2、点击事件里面（.tab_menu ul li） 上边的标题li更换样式selected，同级别siblings的删除被选中的class
	//3、点击事件里面（div.tab_box > div） 获取被选中的索引值，根据索引值显示对应的div，其他的隐藏
	//4、鼠标划入划出展示滑入效果（class=hover）

	$(".tab_menu ul li").click(function() {
			$(this).addClass("selected").siblings().removeClass("selected");
			var index = $(".tab_menu ul li").index(this);
			$("div.tab_box > div").eq(index).show().siblings().hide()
		})
		.hover(function() {
			$(this).addClass("hover");
		}, function() {
			$(this).removeClass("hover");
		});
})

// /*Tab 选项卡 标签*/
// $(function() {
// 	var $div_li = $("div.tab_menu ul li");
// 	$div_li.click(function() {
// 		$(this).addClass("selected") //当前<li>元素高亮
// 			.siblings().removeClass("selected"); //去掉其他同辈<li>元素的高亮
// 		var index = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。
// 		$("div.tab_box > div") //选取子节点。不选取子节点的话，会引起错误。如果里面还有div 
// 			.eq(index).show() //显示 <li>元素对应的<div>元素
// 			.siblings().hide(); //隐藏其他几个同辈的<div>元素
// 	}).hover(function() {
// 		$(this).addClass("hover");
// 	}, function() {
// 		$(this).removeClass("hover");
// 	})
// })
